<template>
  <div class="coupon" :style="{height:page_height+'px'}">

    <!--S顶部tabs-->
    <cube-tab-bar id="tabs" ref="tabs" v-model="selected_tab" :data="tabs" :showSlider="true" @change="changeTab"></cube-tab-bar>
    <!--E顶部tabs-->

    <!--S主体列表-->
    <cube-tab-panels id="main-list" v-model="selected_tab">
        <cube-tab-panel :style="{height:scroll_height+'px'}" v-for="(item,index) in tabs" :label="item.label">
            <cube-scroll ref="scroll" :options="item.scroll_options" @pulling-up="upGetList">
              <div class="ul" v-if="item.list.length > 0">
                <div class="li" :class="itema.type" v-for="(itema,indexa) in item.list" v-bind:key="itema.id" @click="clickLi(indexa)">
                    <img v-if="itema.cover" class="cover" :src="itema.cover" />
                    <p class="type">{{getType(itema.type)}}</p>
                    <p class="cost">{{getCost(itema.type,itema.cost)}}</p>
                    <p class="name">{{itema.name}}</p>
                    <p class="put_number" v-if="select == 0">正在投放中的数量:{{itema.put_number}}</p>
                    <template v-if="select == 1">
                        <p class="status">
                            <span v-if="itema.status == 0" style="color:yellow">未投放</span>
                            <span v-if="itema.status == 1" style="color:#fff;">投放成功</span>
                            <span v-if="itema.status == 2" style="color:blueviolet;">审核中</span>
                            <span v-if="itema.status == 3" style="color:darkred;">拒绝审核</span>
                            <span v-if="itema.status == 4" style="color:darkred;">撤销投放</span>
                        </p>
                        <p class="goal">
                            投放至:
                            <template v-if="itema.goal == 1">宝箱</template>
                            <template v-else>领券页面</template>
                        </p>
                        <p class="inventory">库存:{{itema.give_number}}/{{itema.number}}</p>
                        <p class="time">
                            <template v-if="itema.use_limit_type == '1'">永久有效</template>
                            <template v-else-if="itema.use_limit_type == '2'">有效期至{{itema.time}}</template>
                            <template v-else>领取后{{itema.limit_time}}天内有效</template>
                        </p>
                    </template>
                </div>
              </div>
              <empty v-else>暂无卡券</empty>
            </cube-scroll>
        </cube-tab-panel>
    </cube-tab-panels>
    <!--E主体列表-->

    <!--S底部按钮-->
    <div id="footer" ref="footer" v-if="add_coupon && (select == 0)">
        <cube-button :primary="true"><router-link class="a" to="/edit-coupon/add/0"><i class="iconfont icontianjia"></i>创建卡券</router-link></cube-button>
    </div>
    <!--E底部按钮-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
import empty from '../../components/empty/Empty.vue';
export default {
  name: 'coupon',   //卡券管理
  data(){
    return {
      page_height:document.documentElement.clientHeight,
      scroll_height:document.documentElement.clientHeight, //滚动区域高度
      select:0,  //是否为选择投放卡券模式
      activity_id:0,  //活动id
      store_id:0,  //门店id
      list_index:0,  //操作的卡券列表下标index
      selected_tab:store.state.coupon_classify[0].text,
      tabs:[],
      tabs_index:0,  //tabs下标
      sheet_list:[],  //操作面板选项
      add_coupon:true  //是否有添加卡券的权限
    }
  },
  components:{
    empty
  },
  created(){
    var {select,activity_id} = this.$route.params;
    this.select = parseInt(select);
    this.activity_id = parseInt(activity_id);
    this.initTabs();
    common.store()
            .then((res)=>{
              if(store.state.store.position_id != 0){
                if(store.state.store.authority.includes('coupon')){
                  this.sheet_list = [
                      {
                          content:'修改',
                          value:'edit'
                      },
                      {
                          content:'删除',
                          value:'delete'
                      }
                  ];
                }else{
                    this.add_coupon = false;
                }
                if(store.state.store.authority.includes('activity')){
                    if(this.select){
                        this.sheet_list.unshift({content:'投放',value:'put'});
                    }
                }
                if(!store.state.store.authority.includes('activity') && !store.state.store.authority.includes('coupon')){
                    this.$router.replace('/');
                }
              }else{
                  if(this.select){
                      this.sheet_list = [
                          {
                              content:'投放',
                              value:'put'
                          },
                          {
                              content:'取消投放',
                              value:'cancel'
                          }
                      ]
                  }else{
                      this.sheet_list = [
                          {
                              content:'修改',
                              value:'edit'
                          },
                          {
                              content:'删除',
                              value:'delete'
                          }
                      ];
                  }
              }
              if(res) this.store_id = res.store_id;
            })
            .then(()=>{
                this.getList();
            })
            .catch(error=>console.log(error));
  },
  mounted(){
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.page_height = document.documentElement.clientHeight;
        this.scroll_height = document.documentElement.clientHeight - this.$refs.tabs.$el.getBoundingClientRect().height;
        if(this.$refs.footer){
            this.scroll_height -= this.$refs.footer.getBoundingClientRect().height;
        }
      },100);
    });
  },
  methods:{
    //整理tabs
    initTabs(){
        store.state.coupon_classify.forEach((item)=>{
            this.tabs.push({
                label:item.text,
                v:item.value,
                list:[
                    // {
                    //     id:1,
                    //     type:'满减券',
                    //     cost:'满100减10元',
                    //     name:'卡券名字卡券名字卡券名字卡券名字卡券名字卡券名字卡券名字'
                    // }
                ],
                limit:[0,10],
                scroll_options:{
                    pullUpLoad:{
                        txt:{
                            more:'上拉加载更多',
                            noMore:'----我也是有底线的----'
                        },
                    },
                    scrollbar:true
                }
            });
        });
    },
    //tabs切换
    changeTab(value){
        for(let i=0;i<this.tabs.length;i++){
            if(this.tabs[i].label == value){
                this.tabs_index = i;
                break;
            }
        }
        if(this.tabs[this.tabs_index].list.length <= 0){
            this.getList();
        }
    },
    //获取卡券列表
    getList(){
        this.$http.post(sysinfo.url,Qs.stringify({
            pages:'storeCoupon',
            doing:'getList',
            store_id:this.store_id,
            limit:this.tabs[this.tabs_index].limit,
            type:this.tabs[this.tabs_index].v,
            select:this.select,
            activity_id:this.activity_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.tabs[this.tabs_index].list.push(...res.data.data);
                    this.tabs[this.tabs_index].limit[0] += this.tabs[this.tabs_index].limit[1];
                     this.$refs.scroll[this.tabs_index].forceUpdate(true,true);
                }else{
                    this.$refs.scroll[this.tabs_index].forceUpdate(false,false);
                }
                this.$nextTick(()=>{
                    if(this.$refs.scroll[this.tabs_index].$el.querySelector('.cube-scroll-list-wrapper').getBoundingClientRect().height-1 <= this.page_height){
                        this.tabs[this.tabs_index].scroll_options.pullUpLoad = false;
                    }
                    this.$refs.scroll[this.tabs_index].refresh();
                });
            })
            .catch(error=>console.log(error));
    },
    //返回cost
    getCost(type,value){
        switch(type){
            case 'dj':
                return value.face_value+'元';
            case 'mj':
                return '满'+value.face_value+'元减'+value.minus_value+'元';
            case 'dh':
                return value.face_value;
            case 'zk':
                return value.face_value+'折';
            case 'rc':
                return value.face_value;
        }
    },
    //返回类型type
    getType(type){
        for(let i=0;i<this.tabs.length;i++){
            if(this.tabs[i].v == type){
                return this.tabs[i].label.substring(0,2);
            }
        }
    },
    //上拉加载
    upGetList(){
        this.getList();
    },
    //点击li
    clickLi(index){
        this.list_index = index;
        var index_data = this.tabs[this.tabs_index].list[index];
        this.$createActionSheet({
            title: '操作',
            data:this.sheet_list,
            onSelect:(item)=>{
                switch(item.value){
                    case 'put':  //投放卡券
                        this.$router.push('/putin/'+index_data.id+'/'+this.activity_id);
                        break;
                    case 'cancel':  //取消投放
                        if(index_data.status == 0){
                            this.$createToast({
                                time: 1000,
                                txt: '当前卡券未投放',
                                type:'error'
                            }).show();
                            return;
                        }
                        this.$createDialog({
                            type: 'confirm',
                            icon: 'cubeic-alert',
                            content: '确定要取消投放吗？',
                            onConfirm:()=>{
                                this.cancelPut(index_data.put_id);
                            }
                        }).show();
                        break;
                    case 'edit':  //修改卡券
                        this.$router.push('/edit-coupon/edit/'+index_data.id);
                        break;
                    case 'delete':   //删除卡券
                        this.$createDialog({
                            type: 'confirm',
                            icon: 'cubeic-alert',
                            content: '删除后当前已投放的卡券和已经发放的卡券不会失效，如想彻底停止投放该卡券请前往投放列表手动删除',
                            onConfirm:()=>{
                                this.deleteCoupon(index_data.id);
                            }
                        }).show();
                        break;
                }
            }
        }).show();
    },
    //删除卡券
    deleteCoupon(coupon_id){
        this.$http.post(sysinfo.url,Qs.stringify({
            pages:'storeCoupon',
            doing:'delete',
            coupon_id
        }))
            .then((res)=>{
                if(res.data.status == 'success'){
                    this.tabs[this.tabs_index].list.splice(this.list_index,1);
                    this.$refs.scroll[this.tabs_index].refresh();
                }else{
                    this.$createToast({
                        time: 1000,
                        txt: '删除失败',
                        type:'error'
                    }).show();
                }
            })
            .catch(error=>console.log(error));
    },
    //取消投放卡券
    cancelPut(put_id){
      this.$http.post(sysinfo.url,Qs.stringify({
          pages:'activityCoupon',
          doing:'delete',
          put_id
      }))
          .then((res)=>{
              if(res.data.status == 'success'){
                  this.tabs[this.tabs_index].list[this.list_index].status = 0;
              }else{
                  this.$createToast({
                      time: 1000,
                      txt: '取消失败',
                      type:'error'
                  }).show();
              }
          })
          .catch(error=>console.log(error));
    }
  }
}
</script>

<style scoped>
  #tabs{
    position: fixed;
    z-index:10;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    font-size:16px;
  }
  #main-list{
      position:absolute;
      width:375px;
      top:50px;
  }
  .ul{
    padding:0 10px;
  }
  .ul div.li{
    position: relative;
    width: 355px;
    height: 138px;
    margin-top:15px;
    color:#fff;
    font-size:16px;
    padding:10px;
    box-sizing: border-box;
  }
  .ul div.li.dj{
      background:url('../../theme/images/dj-bg.png')  no-repeat center center;
      background-size:100% 100%;
      filter:drop-shadow(5px 5px 5px #FF7281);
  }
  .ul div.li.mj{
      background:url('../../theme/images/mj-bg.png')  no-repeat center center;
      background-size:100% 100%;
      filter:drop-shadow(5px 5px 5px #E77798);
  }
  .ul div.li.dh{
      background:url('../../theme/images/dh-bg.png')  no-repeat center center;
      background-size:100% 100%;
      filter:drop-shadow(5px 5px 5px #E98974);
  }
  .ul div.li.zk{
      background:url('../../theme/images/zk-bg.png')  no-repeat center center;
      background-size:100% 100%;
      filter:drop-shadow(5px 5px 5px #7A94B7);
  }
  .ul div.li.rc{
      background:url('../../theme/images/rc-bg.png')  no-repeat center center;
      background-size:100% 100%;
      filter:drop-shadow(5px 5px 5px #F97805);
  }
  .ul div.li:nth-last-child(1){
    margin-bottom: 15px;
  }
  .ul div.li .type{
      position: absolute;
      top:0;
      right:10px;
      height:40px;
      line-height: 40px;
      font-size:20px;
      color:#fff;
      text-shadow: 0 0 0.1em, 0 0 0.3em;
  }
  .ul div.li .cover{
      float: left;
      margin-right: 10px;
      display: block;
      width:75px;
      height:75px;
      object-fit: cover;
      border:3px solid #fff;
      box-sizing: border-box;
  }
  .ul div.li .cost{
      float: left;
      width:200px;
      margin-bottom: 5px;
  }
  .ul div.li .name{
      float: left;
      width:200px;
      font-size:14px;
  }
  .ul div.li .put_number{
      position: absolute;
      left:10px;
      bottom:12px;
      font-size:14px;
      width:200px;
  }
  .ul div.li .status{
      position: absolute;
      left:10px;
      bottom:12px;
      font-size:14px;
  }
  .ul div.li .inventory{
      float: left;
      width:200px;
      margin-top: 5px;
      font-size:14px;
  }
  .ul div.li .time{
      position: absolute;
      right:15px;
      bottom:12px;
      font-size:14px;
  }
  .ul div.li .goal{
      position: absolute;
      right:15px;
      bottom:45px;
      font-size:14px;
  }
  #footer{
    position: fixed;
    z-index: 10;
    bottom:0;
    width: 100%;
    height:50px;
  }
  #footer .a{
      display: block;
      color:#fff;
  }
</style>

<style lang="stylus" rel="stylesheet/stylus">
   .cube-pullup-wrapper
       color:#ccc;
       font-size:14px;
</style>
